<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>

    <!-- 
        生命周期:
            1.又名:生命周期回调函数，生命周期函数，生命周期钩子
            2.是什么: Vue在关键时刻帮我们调用的一些特殊函数的名称
            3.生命周期函数的名字不可更改,但函数的具体内容是根据程序员需求编写的
            4.生命周期函数中的this指向是vm或组件实例对象
     -->

    <div id="root">
        <h2>当前的n值是: {{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm =new Vue({
            el:'#root',
            data: {
                n:1
            },
            methods: {
                add () {
                    this.n++
                },
                bye () {
                    console.log('bye')
                    this.$destroy()
                }
            },
            beforeCreate() {
                //此时,无法通过vm访问到data中的数据,methods中的方法,数据代理，数据监测还没完成
                console.log('beforeCreate,')
                // consle.log(this)
                // debugger;
            },
            created() {
                //此时,可以通过vm访问到data中的数据,methods中的方法
                console.log('create,')
                // consle.log(this)
            },
            beforeMount() {
                //页面呈现的是未经Vue编译的DOM结构。所有对DOM的操作，都不奏效 
                console.log('beforeMount')
                // consle.log(this)
            },
            mounted () {
                //1.页面中呈现的是经过Vue编译的DOM
                //2.对DOM的操作均有效(尽可能避免)。
                // 至此初始化过程结束,一般在此进行:开启定时器，发送网络请求，订阅消息，绑定自定义事件，等初始化操作
                console.log('beforeMount')
            },
            beforeUpdate() {
                //此时:数据是新的，但页面是旧的，页面尚未和数据保持同步
                console.log('beforeUpdate')
            },
            updated() {
                //此时:数据是新的，但页面是新的，页面和数据保持同步
                console.log('updated')
            },
            beforeDestroy() {
                //此时:vm中所有的: data,methods,指令，等等，都处于可用状态，马上要执行销毁过程，一般在此阶段:关闭定时器，取消订阅消息，接触自定义事件等收尾操作
                console.log('beforeDestroy')
            },
            destroyed() {
                 //此时:
                 console.log('destroyed')
            },
        })
    </script>
</body>
</html>